<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>OA云信息系统</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
/*定义了元素选择器*/
html{
	height:100%;
}
body{
	height:100%;
	padding:0;/*内边距（填充）*/
	margin:0;/*外边距（边距）*/
}
/* 定义了一个名称为“container”的样式类别选择器  */ 
.my-container{
	width:100%;
	height:100%;
	background-color: #888888;
	/*
		position: relative 相对定位
			相对于元素自身原本位置的定位
	*/
	position: relative;
	/* top:20px;
	left:50px; */
}
.my-title{
	width:100%;
	height:50px;
	background-color: #112255;
	/*
		position: absolute 绝对定位
			相对于【距其最近的】【position值不是static的】父元素的定位，
			若无这样的父元素，则相对于html元素定位。	
	*/
	position: absolute;
	top:0px;
	left:0px;
}
.my-title div{
	color:white;/*块内文字颜色*/
	font-size:23px;/*块内文字大小*/
	font-weight:bold;/*文字的粗细*/
	font-family:楷体;/*文字字体*/
	line-height:50px;/*文字在行高范围内自动垂直居中*/
	padding-left:2px;
}
.my-nav{
	width:150px;
	background-color: #EEEEEE;
	position: absolute;
	top:50px;
	bottom:30px;
	left:0px;
}
.my-content{	
	background-color: white;
	position: absolute;
	top:50px;
	bottom:30px;
	right:0px;
	left:150px;
}
.my-content iframe{
	width:100%;
	height:100%;
	border:none;
}
.my-copyright{
	width:100%;
	height:30px;
	background-color: #112255;
	position: absolute;
	bottom:0px;	
	left:0px;
}
.my-title .my-curr-user{
	color:white;
	font-size:14px;
	line-height:20px;
	position: absolute;
	top:28px;
	right:5px;
}
/*
	div是块级元素，a是行级元素，
	块级元素可以设置可以设置宽高边距等，行级元素不可以。
	还有一种是行级块元素，按行排列并可设置宽高边距等。
*/
.my-title .my-curr-user a{
	display: inline-block;
	width:50px;
	text-align: center;/*块内文字水平对齐方式*/
	border-radius:10px;
}
.my-title .my-curr-user a:link{/*点击超链之前的样式*/
	color:yellow;
	text-decoration: none;/*去掉下划线*/
}
.my-title .my-curr-user a:visited{/*点击超链之后的样式*/
	color:yellow;
	text-decoration: none;/*去掉下划线*/
}
.my-title .my-curr-user a:hover{/*鼠标悬浮于超链之上的样式*/
	color:red;
	text-decoration: none;/*去掉下划线*/
	background-color: yellow;
}
.my-main-menu:link,.my-main-menu:visited{
	text-decoration: none;
}
.my-main-menu:hover{
	text-decoration: none;
	font-weight:bold;
}
.my-sub-menu{
	display: block;
	height:30px;
	line-height:30px;
	text-align: center;
	border-radius:10px;
}
.my-sub-menu:link,.my-sub-menu:visited{
	text-decoration: none;
}
.my-sub-menu:hover{
	text-decoration: none;
	background-color: #00DDDD;
	color:#2233AA;
}
</style>
</head>
<body >
<div class="my-container">
	<div class="my-title" >
		<div>OA云信息系统</div>
		<div class="my-curr-user">
			当前用户:${Emp.e_name},${Emp.d_name},${Emp.p_name}
			<a id="esc"  onclick="return message();"  href="LogToOut.do" class="exit">退出</a>
		</div>
	</div>
	<div class="my-nav">
	<div class="panel-group" id="my-menu">
	  <!-- 菜单单元开始 -->
	  <div class="panel panel-default">
	    <div class="panel-heading" id="headingOne">
	        <a class="my-main-menu" data-toggle="collapse" data-parent="#my-menu" href="#my-safty" >
	          	安全管理
	        </a>
	    </div>
	    <div id="my-safty" class="panel-collapse collapse" >
	      <div class="panel-body">
	      	<a class="my-sub-menu" href="myInfo.jsp" >个人信息</a>
	      	<a class="my-sub-menu" href="LogToUpd.do" target="contentFrame">密码修改</a>
	      </div>
	    </div>
	  </div>
	  <!-- 菜单单元结束 -->
	   <!-- 菜单单元开始 -->
	  <div class="panel panel-default">
	    <div class="panel-heading" id="headingTwo">
	        <a class="my-main-menu" data-toggle="collapse" data-parent="#my-menu" href="#my-info" >
	          	基础信息
	        </a>
	    </div>
	    <div id="my-info" class="panel-collapse collapse" >
	      <div class="panel-body">
	      	<a class="my-sub-menu" href="DepToList.do" target="contentFrame" >部门信息</a>
	      	<a class="my-sub-menu" href="EmpToList.do" target="contentFrame">员工信息</a>
	      </div>
	    </div>
	  </div>
	  <!-- 菜单单元结束 -->
	  <!-- 菜单单元开始 -->
	  <div class="panel panel-default">
	    <div class="panel-heading" id="headingThree">
	        <a class="my-main-menu" data-toggle="collapse" data-parent="#my-menu" href="#my-leave" >
	          	请假系统
	        </a>
	    </div>
	    <div id="my-leave" class="panel-collapse collapse" >
	      	<div class="panel-body">
	      		<a class="my-sub-menu" href="LeaveToList.do" target="contentFrame" >请假申请</a>
	      		<c:if test="${Emp.p_name=='Boss'}">
	      	 		<a class="my-sub-menu" href="LeaveToShenPi.do" target="contentFrame" >请假审批</a>
	      		</c:if>
	      		<c:if test="${Emp.d_name=='人事部'}">
	      			<a class="my-sub-menu" href="LeaveToBeiAn.do" target="contentFrame" >请假备案</a>
	      		</c:if>
	      	</div>
	    </div>
	  </div>
	  <!-- 菜单单元结束 -->
	  <!-- 菜单单元开始 -->
	  <div class="panel panel-default">
	    <div class="panel-heading" id="headingfour">
	        <a class="my-main-menu" data-toggle="collapse" data-parent="#my-menu" href="#my-mission" >
	          	任务系统
	        </a>
	    </div>
	    <div id="my-mission" class="panel-collapse collapse" >
	      	<div class="panel-body">
		      	<c:if test="${Emp.p_name=='Boss'}">
		      		<a class="my-sub-menu" href="Mission.jsp" target="contentFrame">派发任务</a>
		      	</c:if>
	      	 	<a class="my-sub-menu" href="DeliverMission.jsp" target="contentFrame">我的任务</a>
	      	</div>
	    </div>
	  </div>
	  <!-- 菜单单元结束 -->
	</div>	
	</div>
	<div class="my-content"><iframe name="contentFrame"></iframe></div>
	<div class="my-copyright">版权</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
	var del_links=document.querySelectorAll(".exit");
	for(var i=0;i<del_links.length;i++){
		del_links[i].onclick=function(){
			if(confirm("您确实要退出吗？")){
				var xhr=new XMLHttpRequest();
				var url=this.href;
				xhr.open('get', url, true);
				xhr.onreadystatechange=function(){
					if(this.readyState==4){
						var jsonStr=this.responseText;
						//eval('var result='+jsonStr);
						var result=eval("("+jsonStr+")");
						//var result={"success":true,"msg":"删除成功！"};
						if(this.status==200){
							if(result.success){
								alert(result.msg);
								window.location.href='LeaveToBeiAn.do';
							}else{
								alert(result.msg);
							}
						}else{
							alert("请求地址不正确或者服务器出错！");
						}
					}
				};
				xhr.send();
			}
			return false;
		};
	}
</script>
</body>
</html>